<template>
  <h1>一个人的信息</h1>
  <h2>姓名：{{ person.name }}</h2>
  <h2>年龄：{{ person.age }}</h2>
  <button @click="test">测试触发父页面上的方法sayHello</button>
  <!-- 具名插槽 -->
  <slot name="one"></slot>
  <slot name="two"></slot>
  <slot></slot>
</template>
<script>
import { reactive } from 'vue'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Demo',
  props: ['msg', 'school'], //接收的值
  emits: ['sayHello'], //子组件上绑定的自定义方法
  beforeCreate() {
    // console.log('比setup执行晚');
  },
  // 子组件接收两个参数
  // 1、props为上面定义接收的参数的代理对象（具有响应式）
  // 2、context上下文对象
  setup(props, context) {
    console.log('setup比beforeCreate先执行，此时this为undefined', this)
    console.log(props, context)
    // console.log(context.attrs);//相当于vue2中的$attrs,在props中未接收的值会显示在其中,以及绑定在子组件上，但未用emits接收的方法也会显示在其中
    // console.log(context.emit);//相当于vue2中的$emit
    // console.log(context.slots);//相当于vue2中的$slots
    let person = reactive({
      name: '洪奇奇',
      age: 18,
    })

    function test() {
      context.emit('sayHello', '666') //相当于vue2中的$emit
    }

    return {
      person,
      test,
    }
  },
}
</script>
